<template>
  <div class="zone-area-content home">
    <HomeNav></HomeNav>
    <div ref="refZoneList" class="content-list">
      <!-- 目前移动端事件专区固定三个 -->
      <div :class="'zone-item'+(item.index+1)" v-for="item in zoneList" :key="item.index" @click="goPage(item)">
        <div class="sub-tab flex">
          <p v-for="(tab,tabid) in item.subTab" :key="tabid" :style="{'color': colorList[item.index],'borderColor': colorList[item.index]}">{{tab}}</p>
        </div>
        <p class="btn-link"></p>
      </div>
    </div>
    <Tabbar />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, getCurrentInstance } from 'vue'
import Tabbar from '@/components/Tabbar'
import HomeNav from "@/views/home/components/HomeNav.vue"

import EventServe from '@/api/event'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'EventArea'
})

const zoneList = ref([
  {name: "事件专区", index: 0, url: '/event', subTab: ["重大事件跟踪", "民生事件"] },
  {name: "视频专区", index: 1, url: '/zone/video', subTab: ["重点关注", "全部视频"] },
  {name: "项目专区", index: 2, url: '/project', subTab: ["关注项目", "开工前", "施工阶段", "竣工投产"] },
])

const colorList = ref([
  "rgba(80, 28, 24, 0.8)",
  "rgba(29, 67, 151, 0.8)",
  "rgba(96, 48, 25, 0.8)"
])

const router = useRouter()

const goPage = (item) => {
  router.push(item.url)
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
@import url('@/views/home/index');
.zone-area-content{
  .content-list{
    background:linear-gradient(180deg, #3A75C5 0%, #3A75C500 220px, #ffffff00 100%);
    padding: 18px 0;
    @List: 0,1,2;
    .for(@counter) when (@counter < length(@List)+1) {
      .zone-item@{counter} {
        height: 140px;
        width: 343px;
        background: url("@/assets/zone/bg-zone@{counter}.png") no-repeat center center;
        background-size: 343px 140px;
        margin: 0 auto 24px;
        position: relative;
        padding: 60px 0 0 23px;
        box-sizing: border-box;
        .btn-link{
          width: 87px;
          height: 37px;
          background: url("@/assets/zone/icon-zone@{counter}.png") no-repeat center center;
          background-size: 87px 37px;
          position: absolute;
          bottom: 19px;
          left: 19px;
        }
      }
      .for(@counter+1)
    }

    .for(1);
    .sub-tab{
      font-size: 12px;
      flex-wrap: wrap;
      p{
        border-right: 1px solid;
        margin-right: 6px;
        padding-right: 6px;
        &:last-child{
          border-right: none;
        }
      }
    }
    .zone-item3{
      padding-top: 55px;
      .btn-link{
        bottom: 11px;
      }
      .sub-tab{
        p:first-child{
          border-right: none;
          width: 100%;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
